<script setup lang="ts">
// 表格组件
import type { PropsInterface } from './interface'

defineOptions({
  name: 'TableComponent',
})

const props = withDefaults(defineProps<PropsInterface>(), {
  initial: () => [],
  columns: () => [],
  isPagination: true,
  total: 0,
  // ['sizes', 'prev', 'pager', 'next', 'jumper', '->', 'total', 'slot']
  layout: 'prev, pager, next',
  border: true,
  isSelected: false,
  index: false,
})
</script>

<template>
  <div class="table-component-container">
    <ElTable
      :data="props.initial"
      :class="[
        props.isPagination
          ? 'table-isPagination-true'
          : 'table-isPagination-false',
      ]"
      :border="props.border"
      stripe
    >
      <ElTableColumn
        v-if="props.isSelected"
        type="selection"
        width="55"
        align="center"
      />
      <ElTableColumn v-if="props.index" type="index" width="80" align="center">
        <template #header>
          <span>序号</span>
        </template>
      </ElTableColumn>
      <template v-for="(item, index) in props.columns" :key="index">
        <ElTableColumn
          v-if="item.slot"
          :prop="item.prop || item.property"
          :label="item.label"
          :width="item.width"
          :type="item.type"
          :index="item.index"
          :fixed="item.fixed"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template #default="scope">
            <slot :name="item.slotTag" :scope="scope">
              <span>-</span>
            </slot>
          </template>
        </ElTableColumn>
        <ElTableColumn
          v-else
          :prop="item.prop || item.property"
          :label="item.label"
          :width="item.width"
          :type="item.type"
          :index="item.index"
          :fixed="item.fixed"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
        ></ElTableColumn>
      </template>
    </ElTable>
    <div v-if="props.isPagination" class="pagination-container">
      <ElPagination
        class="pag-container-com-custom"
        :layout="props.layout"
        :total="props.total"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.table-component-container {
  width: 100%;
  height: 100%;

  .table-isPagination-true {
    width: 100%;
    height: 90%;
  }

  .table-isPagination-false {
    width: 100%;
    height: 100%;
  }

  .pagination-container {
    width: 100%;
    height: 10%;

    .pag-container-com-custom {
      width: 100%;
      height: 100%;
      justify-content: flex-end;
    }
  }
}
</style>
